import React, {Component} from 'react'
// import { SilderSlick } from "react-slick";
import { Carousel } from 'antd-mobile'

export default class AdImage extends Component {
  constructor (props){
   super(props)
   this.state= {
    imgHeight: 176,
    }
  }
   render() {
    const {bannerlist} = this.props;
    console.log(bannerlist);
    
    return (
      <div className="slider-con">
        <div className="inner">
           <Carousel
          autoplay={false}
          infinite
          selectedIndex={1}
          // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
          // afterChange={index => console.log('slide to', index)}
        >
          {bannerlist.length>0 && bannerlist.map(val => (
            <a
              key={val}
              // href={val.}
              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
              <img
                src={val.url}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </a>
          ))}
        </Carousel>

        </div>
      </div>
    );
   }
}